<template>
  <view :data-theme="theme">
    <view class='personal-data borderPad'>
      <view class='list borRadius14'>
        <view class='item acea-row row-between-wrapper'>
          <view class="acea-row row-between-wrapper">
            <view class="pictrue mr20">
              <image :src='avatarUrl'></image>
            </view>
            <view class="name">
              {{ userInfo && userInfo.nickname ? userInfo.nickname : '' }}
            </view>
          </view>
          <view class="input" @click="goEdit()">
            个人信息
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
      </view>
      <view class='list borRadius14'>
        <view class='item acea-row row-between-wrapper'>
          <view>ID号</view>
          <view class='input acea-row row-between-wrapper'>
            <input type='text' :value='uid' disabled='true' class='id fontColor'></input>
            <text class='iconfont icon-suozi'></text>
          </view>
        </view>
        <view class='item acea-row row-between-wrapper'>
          <view>手机号码</view>
          <navigator url="/pages/users/user_phone/index" hover-class="none" class="input">
            <view class='input acea-row row-between-wrapper'>
							<span type='number' disabled='true' name='phone'
                    class='id fontColor'>{{ userInfo.phone }}</span>
              <text class='iconfont icon-xiangyou'></text>
            </view>
          </navigator>
        </view>
        <!-- #ifdef H5 -->
        <view class="item acea-row row-between-wrapper" v-if="userInfo.phone && wechat">
          <view>密码</view>
          <navigator url="/pages/users/user_pwd_edit/index" hover-class="none" class="input">
            点击修改密码
            <text class="iconfont icon-xiangyou"></text>
          </navigator>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="item acea-row row-between-wrapper" v-if="userInfo.phone">
          <view>密码</view>
          <navigator url="/pages/users/user_pwd_edit/index" hover-class="none" class="input">
            点击修改密码
            <text class="iconfont icon-xiangyou"></text>
          </navigator>
        </view>
        <!-- #endif -->
<!--        <view class='item acea-row row-between-wrapper'>-->
<!--          <view>地址管理</view>-->
<!--          <navigator url="/pages/address/user_address_list/index" hover-class="none" class="input">-->
<!--            立即设置-->
<!--            <text class="iconfont icon-xiangyou"></text>-->
<!--          </navigator>-->
<!--        </view>-->
        <!-- #ifdef APP-PLUS -->
        <view class='item acea-row row-between-wrapper'>
          <view>检查更新</view>
          <view class="input" @click="appUpdate">
            立即设置
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view class='item acea-row row-between-wrapper'>
          <view>权限设置</view>
          <view class="input" @click="Setting">
            点击管理
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <!-- #endif -->
        <view class="item acea-row row-between-wrapper">
          <view>资质证明</view>
          <navigator url="/pages/goods/agreement_info/index?from=intelligentinfo" hover-class="none"
                     class="input">
            点击查看
            <text class="iconfont icon-xiangyou"></text>
          </navigator>
<!--          <view class="input" @click="Setting">-->
<!--            点击查看-->
<!--            <text class="iconfont icon-xiangyou"></text>-->
<!--          </view>-->
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>协议规则</view>
          <navigator url="/pages/goods/agreement_rules/index" hover-class="none" class="input">
            点击查看
            <text class="iconfont icon-xiangyou"></text>
          </navigator>

<!--          <view class="input" @click="Setting">-->
<!--            点击查看-->
<!--            <text class="iconfont icon-xiangyou"></text>-->
<!--          </view>-->
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>账号注销</view>
          <view class="input" @click="changeCancel">
            注销后无法恢复
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>账号切换</view>
          <view class="input" @click="switchAccounts">
            切换其他账号
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </view>
        <!-- #ifdef H5 -->
        <view class="logOut cart-color acea-row row-center-wrapper" @click="outLogin"
              v-if="!this.$wechat.isWeixin() || (this.$wechat.isWeixin() && publicLoginType ==2)">退出登录
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="logOut cart-color acea-row row-center-wrapper" @click="outLogin">退出登录</view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view class="logOut cart-color acea-row row-center-wrapper" @click="outLogin">退出登录</view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import animationType from '@/utils/animationType.js'
import {
  mapGetters
} from "vuex";
import {goToAgreement} from "@/libs/order";

let app = getApp();
export default {
  data() {
    return {
      theme: app.globalData.theme,
      wechat: false,
      loginType: 'h5',
      avatarUrl: '',
      publicLoginType: app.globalData.publicLoginType //公众号登录方式(单选),1微信授权，2手机号登录
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo'])
  },
  onLoad() {
    if (!this.isLogin) {
      toLogin();
    }
    this.avatarUrl = this.userInfo.avatar ? this.userInfo.avatar : '../static/images/f.png';
    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.$set(this, 'wechat', false);
    } else {
      this.$set(this, 'wechat', true);
    }
    // #endif
  },
  methods: {
    /**
     * 注销账号
     *
     */
    changeCancel() {
      goToAgreement('useraccountcancelnoticeinfo')
    },
    /**
     * 编辑页面
     *
     */
    goEdit() {
      if (this.isLogin == false) {
        Cache.set(BACK_URL, '')
        toLogin();
      } else {
        uni.navigateTo({
          animationType: animationType.type,
          animationDuration: animationType.duration,
          url: '/pages/users/user_info/index'
        })
      }
    },
    /**
     * APP检查更新
     *
     */
    appUpdate() {
      uni.navigateTo({
        url: '/pages/users/app_update/app_update',
        animationType: animationType.type,
        animationDuration: animationType.duration,
      })
    },
    /**
     * 切换账号
     *
     */
    switchAccounts() {
      uni.navigateTo({
        url: '/pages/common/accounts/binding',
      })
    },
    /**
     * 退出登录
     *
     */
    outLogin: function () {
      let that = this;
      if (that.loginType == 'h5') {
        uni.showModal({
          title: '提示',
          content: '确认退出登录?',
          success: function (res) {
            if (res.confirm) {
              that.$store.dispatch('GETLOGOUT');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    },
    /**
     * 小程序设置
     */
    Setting: function () {
      uni.openSetting({
        success: function (res) {
          console.log(res.authSetting)
        }
      });
      // uni.showToast({
      //   icon: 'none',
      //   title: '敬请期待'
      // });
    },
  }
}
</script>

<style scoped lang="scss">
.fontColor {
  color: #666666;
}

.personal-data .wrapper {
  margin: 10rpx 0;
  background-color: #fff;
  padding: 36rpx 30rpx 13rpx 30rpx;
}

.personal-data .wrapper .title {
  margin-bottom: 30rpx;
  font-size: 32rpx;
  color: #282828;
}

.personal-data .wrapper .wrapList .item {
  width: 690rpx;
  height: 160rpx;
  background-color: #f8f8f8;
  border-radius: 20rpx;
  margin-bottom: 22rpx;
  padding: 0 30rpx;
  position: relative;
  border: 2rpx solid #f8f8f8;
  box-sizing: border-box;
}

.personal-data .wrapper .wrapList .item.on {
  border-color: $theme-color;
  border-radius: 20rpx;
  background-image: url("");
  background-size: 100% 100%;
  background-color: #fff9f9;
  background-repeat: no-repeat;
}

.personal-data .wrapper .wrapList .item .picTxt {
  width: 445rpx;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue {
  width: 96rpx;
  height: 96rpx;
  position: relative;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.personal-data .wrapper .wrapList .item .picTxt .text {
  width: 325rpx;
}

.personal-data .wrapper .wrapList .item .picTxt .text .name {
  width: 100%;
  font-size: 30rpx;
  color: #282828;
}

.personal-data .wrapper .wrapList .item .picTxt .text .phone {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.personal-data .wrapper .wrapList .item .bnt {
  font-size: 24rpx;
  background-color: #fff;
  border-radius: 27rpx;
  width: 140rpx;
  height: 54rpx;
  border: 2rpx solid $theme-color;
}

.personal-data .wrapper .wrapList .item .currentBnt {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26rpx;
  background-color: rgba(233, 51, 35, 0.1);
  width: 140rpx;
  height: 48rpx;
  border-radius: 0 20rpx 0 20rpx;
}

.personal-data .list {
  margin-top: 30rpx;
  background-color: #fff;
}

.personal-data .list .item {
  border-bottom: 1rpx solid #f2f2f2;
  padding: 24rpx;
  font-size: 32rpx;
  color: #333333;
}

.personal-data .list .item .phone {
  width: 160rpx;
  height: 56rpx;
  font-size: 24rpx;
  color: #fff;
  line-height: 56rpx;
  border-radius: 32rpx
}

.personal-data .list .item .pictrue {
  width: 80rpx;
  height: 80rpx;
  position: relative;
}

.personal-data .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.personal-data .list .item .pictrue .alter {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.personal-data .list .item .input {
  text-align: right;
  color: #BBBBBB;
}

.personal-data .list .item .input .id {
  width: 365rpx;
}

.personal-data .list .item .input .iconfont {
  font-size: 35rpx;
  margin-left: 20rpx;
}

.personal-data .modifyBnt {
  font-size: 32rpx;
  color: #fff;
  width: 690rpx;
  height: 90rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 90rpx;
  margin: 76rpx auto 0 auto;
}

.bg_color {
  @include main_bg_color(theme);
}

.personal-data .logOut {
  font-size: 32rpx;
  text-align: center;
  width: 690rpx;
  height: 90rpx;
  border-radius: 45rpx;
  margin: 0 auto;
}
</style>
